<template>
  <view class="wrap" style="padding-bottom: 60px;">
    <view class="header">
      <view class="userinfo" @click="navTo('info')">
        <view class="image">
          <!-- <image :src="avatarUrl"></image> -->
          <u-avatar size="80" :src="avatarUrl()"></u-avatar>
        </view>
        <view class="info" style="flex:1;display: flex;justify-content: space-between;">
          <view>
            <view class="username">请假</view>
            <view class="usercode">{{message.sendName}}</view>
          </view>
          <view v-if="message.status ==0">
            <u-tag text="待审核" shape="circle" type="warning" style="height: 55rpx;" />
          </view>
          <view v-if="message.status ==1">
            <u-tag text="已审核" shape="circle" type="success" style="height: 55rpx;" />
          </view>
          <view v-if="message.status ==2">
            <u-tag text="已审核" shape="circle" type="error" style="height: 55rpx;" />
          </view>
        </view>
      </view>
    </view>
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    <!-- 当前套餐 -->
    <view v-if="current === 0">
      <u-gap height="18" bg-color="#f5f5f5"></u-gap>
      <u-cell-group class="datails-examine">
        <u-cell-item title="请假类型" label="事假" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="开始时间" :label="message.startTime" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="结束时间" :label="message.endTime" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="请假事由" :label="message.info_content" :arrow="false" :border-bottom="false"></u-cell-item>
      </u-cell-group>
      <u-gap height="11" bg-color="#f5f5f5"></u-gap>
      <u-form-item :border-bottom="false" style="padding: 10px">
        <u-time-line>
          <u-time-line-item nodeTop="15">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #0190ef;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">发起申请</view>
              </view>
            </template>
          </u-time-line-item>

          <u-time-line-item nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #ffffff;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="account-fill" :size="50"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
              
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{message.sendName}}</view>
                <!-- <view class="u-order-time">2019-05-08 12:12</view> -->
              </view>
            </template>
          </u-time-line-item>

          <u-time-line-item nodeTop="15">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #0190ef;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">审批人</view>
              </view>
            </template>
          </u-time-line-item>

          <u-time-line-item nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #ffffff;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="account-fill" :size="50"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{vuex_user.nickName}}</view>
                <!-- <view class="u-order-time">2019-05-08 12:12</view> -->
              </view>
            </template>
          </u-time-line-item>





        </u-time-line>
      </u-form-item>
      <!-- 	<u-time-line>
				<u-time-line-item nodeTop="2">
						<! 此处自定义了左边内容，用一个图标替代 -->
      <!-- 					<template v-slot:node>
						<image class="user-images" src="/static/aidex/images/user06.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">发起人</view>
							<view class="u-order-time">05-08 12:12</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2"> -->
      <!-- 此处自定义了左边内容，用一个图标替代 -->
      <!-- 					<template v-slot:node>
						<image class="user-images" src="/static/aidex/images/user06.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">部门领导</view>
							<view class="u-order-time">05-08 12:12</view>
						</view>
						<view class="u-order-desc">同意</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2"> -->
      <!-- 此处自定义了左边内容，用一个图标替代 -->
      <!-- 			<template v-slot:node>
						<image class="user-images" src="/static/aidex/images/user06.png"></image>
					</template> -->
      <!-- 					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司领导</view>
							<view class="u-order-time">05-08 12:12</view>
						</view>
						<view class="u-order-desc">同意</view>
					</template>
				</u-time-line-item> -->
      <!-- </u-time-line> -->
      <u-modal v-model="show" :show-cancel-button="true" @confirm="confirm">
        <view class="slot-content">
          <u-input :clearable="false" v-model="message_content" type="textarea" placeholder="填写拒绝的原因,非必填" />
        </view>
      </u-modal>
      <u-row gutter="25" class="bottom-boxs" justify="center" v-if="message.status == 0">
        <u-col span="6">
          <view><u-button :plain="true" type="primary" @click="show = true">拒绝</u-button></view>
        </u-col>
        <u-col span="6">
          <view><u-button type="primary" @click="updateStutes()">确定</u-button></view>
        </u-col>

      </u-row>

      <u-row gutter="25" class="bottom-boxs" justify="center" v-if="message.status == 1">
        <u-col span="10">
          <view><u-button :plain="true" type="success">已审核</u-button></view>
        </u-col>
      </u-row>

      <u-row gutter="25" class="bottom-boxs" justify="center" v-if="message.status == 2">
        <u-col span="10">
          <view><u-button :plain="true" type="error">已拒绝</u-button></view>
        </u-col>
      </u-row>



    </view>
  </view>


  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
        list: [{
          name: '申请详情'
        }],
        message_content: '',
        message: '',
        m2mSimflowList: [],
        m2mOrderFlowList: [],
        current: 0,
        status: 'loadmore',
        iconType: 'circle',
        isDot: false,
        loadText: {
          loadmore: '点击加载更多',
          loading: '正在加载...',
          nomore: '没有更多了'
        },
      }
    },
    onLoad(options) {
      // 解析传递的对象
      if (options.query !== null)
        
        this.message = JSON.parse(options.query.data);
        console.log(this.message)
    },

    methods: {
      //修改请假消息状态
      updateStutes() {
        this.$u.api.updateLeaveMessage(this.message).then(response => {
          if (response.code == 200) {
            uni.navigateBack({
              delta: 1, // 返回的页面数，1 表示返回上一个页面，2 表示返回上两个页面，以此类推

            });
    let msg = {
     	warningTypeStr: "通知消息",
     	projectName: "现在",
     	description: "审核成功",
       messageImage: ''
     };
    this.createAlarm(msg, res => {
     });

          } else {
         let msg = {
          	warningTypeStr: "通知消息",
          	projectName: "现在",
          	description: "审核失败",
            messageImage: ''
          };
         this.createAlarm(msg, res => {
          });

          }


        })
      },
      avatarUrl(){
        return this.vuex_config.baseUrl +'/dev-api'+this.vuex_user.avatar;
      },
      confirm() {
        this.$u.api.updateRefuseLeave({
          messageId: this.message.messageId,
          messageContent: this.message_content
        }).then(response => {
          if (response.code == 200) {
            uni.navigateBack({
              delta: 1, // 返回的页面数，1 表示返回上一个页面，2 表示返回上两个页面，以此类推

            });
        let msg = {
         	warningTypeStr: "通知消息",
         	projectName: "现在",
         	description: "审核成功",
           messageImage: ''
         };
        this.createAlarm(msg, res => {
         });

          } else {
          let msg = {
           	warningTypeStr: "通知消息",
           	projectName: "现在",
           	description: "审核失败",
             messageImage: ''
           };
          this.createAlarm(msg, res => {
           });

          }

        })





      },

      change(index) {
        this.current = index;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      }
    }

  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .slot-content {
    font-size: 28rpx;
    padding-left: 30rpx;
  }

  .wrap .search {
    background: #ffffff;
  }

  .apply-text {
    font-size: 28rpx;
    color: #333333;

    span {
      color: #999999;
    }
  }

  .user-images {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .apply-list-foot {
    font-size: 28rpx;
  }

  .personnel-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .personnel-user {
      position: relative;
      margin: 5px 9px 0;
    }

    .user-images {
      width: 32px;
      height: 32px;
      margin-right: 0;

    }

    .iconfont {
      position: absolute;
      top: -12px;
      right: -5px;
      color: #FE0100;
    }
  }

  .bottom-boxs {
    position: fixed;
    z-index: 99;
    background: #ffffff;
    height: 92rpx;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ededed;

    .number-text {
      color: #333333;
      font-size: 20rpx;

      em {
        font-style: normal;
        color: #ff4400;
        font-size: 36rpx;
      }
    }
  }

  .header {
    background-color: #ffffff;

    .userinfo {
      display: flex;
      padding: 20rpx 20rpx 10rpx;

      .image {
        flex-shrink: 0;
        width: 80rpx;
        height: 80rpx;

        image {
          border-radius: 100%;
          width: 100%;
          height: 100%;
        }
      }

      .info {
        display: flex;
        flex-flow: wrap;
        padding-left: 30rpx;
        color: #333333;

        .username {
          width: 100%;
          font-size: 32rpx;
        }

        .usercode {
          padding: 0;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .logout {
      flex-shrink: 0;
      position: absolute;
      right: 70rpx;
      top: 65rpx;

      .u-btn {
        font-size: 30rpx;
      }
    }
  }

  .u-node {
    width: 44rpx;
    height: 44rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 30rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
</style>